<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>预约记录列表</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" href="plugins/layui/css/layui.css" media="all" />
<link rel="stylesheet"
	href="//at.alicdn.com/t/font_tnyc012u2rlwstt9.css" media="all" />
	<style>
		.dynamicShow{
			margin: 20px 40px 0 40px;
		}
		.layui-table-box, .layui-table-view{
			min-height:610px;
		}
	</style>
</head>
<body class="childrenBody">
	<blockquote class="layui-elem-quote news_search">
		<form class="layui-form">
			<div class="layui-inline dynamicShow1" >
				<label class="layui-form-label">门店</label>
				<div class="layui-input-block">
					<select name="merchantId" id="merchantId">
						<option value="">--请选择门店--</option>
					</select>
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">服务时间</label>
				<div class="layui-input-block">
					<input type="text" class="layui-input" name="timeRange"
						placeholder="请输入服务时间" id="searchTime">
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">关键字</label>
				<div class="layui-input-block">
					<input type="text" class="layui-input" name="keyword"
						placeholder="姓名/电话/车牌号码">
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">服务项目</label>
				<div class="layui-input-block">
					<input type="text" class="layui-input" name="productName"
						placeholder="请输入服务项目">
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">订单状态</label>
				<div class="layui-input-block">
					<select name="status">
						<option value="">--请选择状态--</option>
						<option value="2">已结算</option>
						<option value="1">待结算</option>
						<option value="-1">已取消</option>
					</select>
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">支付状态</label>
				<div class="layui-input-block">
					<select name="payStatus">
						<option value="">--请选择状态--</option>
						<option value="-1">未支付</option>
						<option value="1">线上支付</option>
						<option value="2">线下支付</option>

					</select>
				</div>
			</div>
			<div class="layui-inline">
				<a class="layui-btn search_btn" lay-submit=""
					lay-filter="queryService" style="background: #fff;color:#5785db;border:1px solid #5785db;">查询</a>
			</div>
			<div class="layui-inline dynamicShow">
				<a class="layui-btn layui-btn-normal servicesAdd_btn">新建服务单</a>
			</div>
		</form>

	</blockquote>
	<div class="layui-form news_list">
		<table class="layui-table" id="subscribeList" lay-filter="subscribes"></table>
	</div>
	<div id="page"></div>
	<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
	<script type="text/javascript" src="plugins/layui/layui.all.js"></script>
	<script type="text/javascript" src="js/user/newsList.js"></script>

	<script type="text/html" id="barDemo">
		{{# if(d.subscribeStatus==1){ }}
      	<a class="layui-btn layui-btn-xs" lay-event="settle"><i class="iconfont icon-edit"></i>结算</a>
		  <a class="layui-btn layui-btn-xs" lay-event="edit"><i class="iconfont icon-edit"></i>查看</a>
	    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="cancel"><i class="layui-icon"></i>取消</a>
        {{# }else if(d.subscribeStatus==2){ }}
	<a class="layui-btn layui-btn-xs" lay-event="edit"><i class="iconfont icon-edit"></i>查看</a>
	 {{# } }}
  </script>
	
	<script type="text/javascript">
		//重新渲染表单
		function renderForm() {
			layui.use('form', function() {
				var form = layui.form;//高版本建议把括号去掉，有的低版本，需要加()
				form.render();
			});
		}
		layui.config({
			base : '/js/admin/'
		}).extend({
			ajaxExtention : 'ajaxExtention',//加载自定义扩展，每个业务js都需要加载这个ajax扩展
			$tool : 'tool'
		}).use([ 'table', 'form', '$tool', 'laydate' ], function() {
			var table = layui.table;
			var form = layui.form;//高版本建议把括号去掉，有的低版本，需要加()
			$tool = layui.$tool;
			var laydate = layui.laydate;

            $.ajax({
                type : "GET",
                url: '/merchants/merchants.json',
                dataType:'json',
                async:false,
                success: function(data){
                    var list=data.data;
                    var html='';
                    for(var i=0;i<list.length;i++){
                        html += "<option value='"+list[i].id+"'>"+list[i].name+"</option>"
                    }
                    $("#merchantId").append(html);
                    form.render();
                }
            });
			//日期时间范围选择
			laydate.render({
				elem : '#searchTime',
				type : 'date',
				range : true
			//或 range: '~' 来自定义分割字符
			});

            var isAdminstr=localStorage.getItem("isAdmin");
            var isAdmin=isAdminstr=='true'?true:false;
            if(isAdmin){
                $(".dynamicShow").hide();
                $(".dynamicShow1").show();
            }else {
                $(".dynamicShow").show();
                $(".dynamicShow1").hide();
            }
			//方法级渲染  0预约中,-1取消,1开单,2结算 products
			var tableIns = table.render({
				elem : '#subscribeList',
				url : '/subscribe/serviceList',
				cols : [ [ {
					checkbox : true,
					fixed : true
				}, {
                    field:'merchantName',
                    title: isAdmin?'所属门店':'',
                    width:isAdmin?'10%':'0%',
                    minWidth:'0%',
                    type:isAdmin?'':'space',
                    style:isAdmin?'':'display:none'
                },{
					field : 'username',
                    width:'8%',
					title : '姓名'
				}, {
					field : 'phone',
                    width:'8%',
					title : '手机号'
				}, {
					field : 'carNum',
                    width:'8%',
					title : '车牌号码',
				},{
                    field : 'frameNum',
                    title : '车架号',
                    width : '10%'
                },{
					field : 'balanceTime',
                    width:'8%',
					title : '结算时间',
					templet:function(d){
						 if(d.balanceTime!=null){
							return $tool.formatTime(d.balanceTime);
						}else{
							return "---"
						} 
					}
				},
				{
					field : 'products',
                    width:'8%',
					title : '服务项目',
				}, {
					field : 'price',
                        width:'8%',
					title : '服务报价',
				},{
				    field : 'progress',
                        width:'6%',
						title : '服务进度',
                        templet : function(d) {
                            if (d.progress == '' ||d.progress==null) {
                                return "无工序";
                            }else {
                                return d.progress;
							}
                        }
					},
					{
					field : 'subscribeStatus',
					width:'6%',
					title : '状态',
					templet : function(d) {
						if (d.subscribeStatus == 0) {
							return "预约中";
						} else if (d.subscribeStatus == -1) {
							return "已取消";
						} else if (d.subscribeStatus == 1) {
							return "待结算";
						} else if (d.subscribeStatus == 2) {
							return "已结算";
						}
					}
				},{
					field : 'payStatus',
					width:'8%',
					title : '支付方式',
					templet : function(d) {
						if (d.payStatus == 1) {
							return "线上支付";
						} else if (d.payStatus == 2) {
							return "线下支付";
						}else if( (d.payStatus == -1) ){
						    return "未支付";
						}
					}
                    }, {
					title : '操作',
					align : 'center',
					toolbar : '#barDemo'
				}

				] ],
				id : 'testReload',
				page : true,
//				height : 600
			});

			form.on("submit(queryService)", function(data) {
				var timeRange = data.field.timeRange;
				var status = data.field.status;
                var payStatus = data.field.payStatus;
				var productName = data.field.productName;
				var keyword=data.field.keyword;
				var merchantId=data.field.merchantId;
				//表格重新加载
				tableIns.reload({
					where : {
						timeRange : timeRange,
						status:status,
						payStatus:payStatus,
						productName:productName,
						keyword:keyword,
						merchantId:merchantId
					}
				});
				return false;
			});

			table.on('tool(subscribes)', function(obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
				var data = obj.data; //获得当前行数据
				var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
				var tr = obj.tr; //获得当前行 tr 的DOM对象

				if (layEvent === 'edit') { //编辑
					var subscribeId = obj.data.subscribeId;
					toSubscribeDetail(subscribeId);
					//do somehing
				} else if (layEvent === 'cancel') { //删除
					//向服务端发送取消指令
					var subscribeId = obj.data.subscribeId;
					$.ajax({
						type : "POST",
						url : "/subscribe/cancel",
						data : {
							subcribeId : subscribeId
						},// 序列化表单值  
						success : function(data) {
							if (data.code == 2000) {
								//top.layer.close(index);
								top.layer.msg("取消预约成功");
								//parent.location.reload();
								tableIns.reload();
							}
						},

						error : function(request) {
							alert("Connection error");
						}
					});

				} else if (layEvent === 'settle') { //编辑
					//do something
					var subscribeId = obj.data.subscribeId;
					$.ajax({
						type : "POST",
						url : "/subscribe/finish",
						data : {
							subcribeId : subscribeId
						},// 序列化表单值  
						success : function(data) {
							if (data.code == 2000) {
								//top.layer.close(index);
								top.layer.msg("结算成功");
								//	parent.location.reload();
								tableIns.reload();
							}
						},

						error : function(request) {
							alert("Connection error");
						}
					});
				
				}
			});
		});

		$(window).one("resize", function() {
			$(".servicesAdd_btn").click(function() {
				var index = layui.layer.open({
					title : "新建服务单",
					type : 2,
					content : "subscribe/servicesAdd.html",
					success : function(layero, index) {

					}
				})
				layui.layer.full(index);
			})
		}).resize();

		var categoryList;
		$.ajax({
			type : "GET",
			url : 'categorys/getAlls',
			dataType : 'json',
			async : false,
			success : function(data) {
				var list = data.data;
				categoryList = list;
				var html = '';
				for (var i = 0; i < list.length; i++) {
					html += "<option value='"+list[i].id+"'>" + list[i].name
							+ "</option>"
				}
				$("select[name='categoryId']").append(html);
				renderForm();//表单重新渲染，要不然添加完显示不出来新的option
			}
		});

		function editSubscribe(id) {
			var index = layui.layer.open({
				title : "编辑预约单",
				type : 2,
				content : "subscribe/subscribesEdit.html?id=" + id,
				success : function(layero, index) {

				}
			});

			//改变窗口大小时，重置弹窗的高度，防止超出可视区域（如F12调出debug的操作）
			$(window).resize(function() {
				layui.layer.full(index);
			});
			layui.layer.full(index);
		}
		
		
		function toSubscribeDetail(id){
			var index = layui.layer.open({
				title : "编辑服务记录",
				type : 2,
				content : "subscribe/service_detail.html?id=" + id,
				success : function(layero, index) {

				}
			});

			//改变窗口大小时，重置弹窗的高度，防止超出可视区域（如F12调出debug的操作）
			$(window).resize(function() {
				layui.layer.full(index);
			});
			layui.layer.full(index);
		}
	</script>
</body>
</html>